<template>
  <div class="tableContent">
    <!-- 表格 -->
    <div class="table">
      <div class="self">
        <el-table
          ref="tableRef"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column
            align="center"
            prop="alarmName"
            :label="$t('告警项')"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="alarmConditions"
            :label="$t('告警阈值')"
          >
            <template slot-scope="scope">
              <div class="txt">
                {{ scope.row.alarmConditions[0].alarmKey }}
                {{ scope.row.alarmConditions[0].alarmValue }}
              </div>
            </template>
          </el-table-column>

          <el-table-column align="center" prop="unit" :label="$t('单位')">
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            align="left "
            prop="alarmContent"
            :label="$t('告警规则')"
          >
            <template slot-scope="scope">
              <span v-html="scope.row.alarmContent"></span>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            align="left "
            prop="definedAlarmContent"
            :label="$t('自定义告警播报内容')"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.isEdit">
                <el-input
                  style="width: 200px; margin: 0 8px"
                  v-model="scope.row.definedAlarmContent"
                  size="mini"
                ></el-input>
              </div>
              <div v-else v-html="scope.row.definedAlarmContent"></div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="alarmAdvise"
            :label="$t('告警阈值建议')"
          >
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import { API_editContent } from "@/api/task/alarmrules.js";

export default {
  components: {},
  data() {
    return {
      tableData2: this.tableData,
    };
  },
  props: {
    title: {
      type: String,
      default: "",
    },
    tableData: {
      type: Array,
      default: () => [],
    },
  },
  created() {},
  methods: {
    editTable(edit, tableData) {
      tableData.forEach((item) => {
        if (!edit) {
          // 编辑
          this.$set(item, "isEdit", true);
        } else {
          // 保存
          this.$set(item, "isEdit", false);
        }
      });
    },
    resetEdit(tableData) {
      tableData.forEach((item) => {
        this.$set(item, "isEdit", false);
      });
      this.$emit("getTableList");
    },
    // 保存表格
    getAlarmRules(data) {
      let params = [];
      data.forEach((item) => {
        params.push({
          id: item.id,
          definedAlarmContent:
            item.definedAlarmContent == null ? "" : item.definedAlarmContent,
        });
      });
      API_editContent(params)
        .then((res) => {
          if (res.code == 200) {
            this.$message({
              message: this.$t("保存成功"),
              type: "success",
            });
            this.$emit("getTableList");
          } else if (res.code == 304) {
            this.$message.error(res.msg);
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {})
        .finally(() => {
          this.$emit("getTableList");
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.tableContent {
  .table_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title {
      font-size: 18px;
      font-weight: bold;
      color: #00d1ff;
      padding: 24px 0 16px;
    }
    .table_edit {
      display: flex;
    }
  }
}
.el-table {
  padding-bottom: 0px;
}
.edit-btn {
  width: 66px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 2px;
  border: 1px solid rgba(0, 209, 255, 0.7);
  background-color: rgba(0, 209, 255, 0.2);
  font-size: 16px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #ffffff;
  cursor: pointer;
}
.resets-btn {
  width: 66px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 2px;
  border: 1px solid rgba(219, 255, 251, 0.7);
  background-color: rgba(219, 255, 251, 0.2);
  font-size: 16px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #ffffff;
  cursor: pointer;
  margin-left: 10px;
}
</style>
<style scoped>
::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
::v-deep input[type="number"] {
  -moz-appearance: textfield !important;
}
</style>
